<template>


  <div :class="['input-number', disabled ? 'is-disabled' : '']">
    <img src="@/assets/images/comm/up.png" class=" top pointer" @click="add"></img>
    <img src="@/assets/images/comm/down.png" class=" bot pointer" @click="sub"></img>
    <div class="util">mm</div>
    <input :disabled="disabled" v-model="model" :max="max" :min="min" type="number">
  </div>
</template>

<script setup lang="ts">
import { nextTick, watch } from "vue"
const props = withDefaults(defineProps<{
  disabled?: boolean,
  hasUtil?: boolean,
  max?: number,
  min?: number
}>(), {
  disabled: false,
  hasUtil: true,
  max: 99999,
  min: -9999
})

const model = defineModel({ default: 1 });
const add = () => {
  if (props.disabled) return
  console.log("加")
  model.value += 1
}
const sub = () => {
  if (props.disabled) return

  console.log("减")
  model.value -= 1
}

const emits = defineEmits<{
  (e: 'changeValue', value: number): void
}>()

let timer
watch(model, newModel => {
  // 最大值最小值限制
  if (newModel > props.max) {
    model.value = props.max
  }
  if (newModel < props.min) {
    model.value = props.min
  }
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    emits('changeValue', model.value)
  }, 500);
})

</script>
<style lang="scss" scoped>
.is-disabled {
  color: #C1C5D9 !important;

  input {
    background-color: #F2F4F7 !important;
  }
}

.input-number {
  width: 110px;
  height: 24px;
  flex-shrink: 0;




  border: 1px solid #E5E7E7;
  border-radius: 4px;

  overflow: hidden;
  position: relative;

  .util {
    position: absolute;
    right: 40px;
    top: 5px;
    color: #C1C5D9;
    font-size: 12px;
    font-weight: 400;

  }

  .pointer {
    position: absolute;
    right: 5px;
    top: 0;
    color: #000 !important;
    font-weight: 500;
  }

  .top {
    top: 3px;
  }

  .bot {
    top: 14px;
  }

  input {
    width: 250px;
    height: 24px;
    outline: none;
    border: none;
    padding-left: 5px;
  }

}
</style>